<template>
	<view class="demoVuex">
		<view class="scroll-wrapper">
			<image src="/static/images/logo.png" class="logo"></image>
			<div class="title">{{username}}，懵逼小前端{{age}}</div>
			<div class="bg"></div>
			<button class="btn" @tap="clickAction()">跳转</button>
			<view v-for="(item,index) in todos">
				<view>{{item.id}}</view>
				<view>{{item.text}}</view>
				<view>{{item.done}}</view>
			</view>
			{{doneCount}}
			{{count}}
		</view>
	</view>
</template>

<script lang="ts">
    import Vue from 'vue';
	import util from '@/static/js/util'
	import { mapState,mapGetters,mapMutations,mapActions  } from 'vuex'
	
	export default Vue.extend({
		data() {
			return {
				firstName: 'Hello'
			}
		},
		computed: {
			...mapState({
				username: function (state:any) {
					return this.firstName + ' ' +  state.demoVuex.username 
				},
				age: (state:any) => state.demoVuex.age,
				todoss: (state:any) => state.demoVuex.doneTodos,
				count: (state:any) => state.demoVuex.count
			}),
			...mapGetters({
				doneCount: 'doneTodosCount'
			}),
			todos() {
				return this.$store.getters.getTodoById(1) 
			}
		},
		onLoad(option:any) {
			const _this:any = this
			console.log(_this )
		},
		methods: {
			clickAction() {
				const _this:any = this
				// _this.add(1)
				// _this.$store.commit('add',5)
				_this.addCountAction(5)
				// this.$store.dispatch('addCountAction',5)
				// util.jumpPage('/pages/index/index?id=321','tabBar')
			},
			...mapMutations(['add']),
			...mapActions(['addCountAction'])  // 将 `this.addCountAction()` 映射为 `this.$store.dispatch('addCountAction')`
		}
	});
</script>

<style lang="scss">
	@import "./demoVuex.scss";  
</style>